<template>
  <el-card class="box-card">
    <h2>团课预约设置</h2>

    <el-form label-width="140px" class="form-group">
      <!-- 预约开始时间 -->
      <el-form-item label="预约开始时间">
        <el-radio-group v-model="startOption">
          <el-radio label="no-limit">不限制会员可提前预约的天数</el-radio>
          <el-radio label="limit-days">
            会员最多可以提前预约
            <el-input-number v-model="startDays" :disabled="startOption !== 'limit-days'" min="1" style="margin-left: 10px; width: 100px;"></el-input-number> 天的课程
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 预约截止时间 -->
      <el-form-item label="预约截止时间">
        <el-radio-group v-model="endOption">
          <el-radio label="no-limit">任意时间均可预约</el-radio>
          <el-radio label="limit-hours">
            预约截至时间为上课前
            <el-input-number v-model="endHours" :disabled="endOption !== 'limit-hours'" min="1" style="margin-left: 10px; width: 100px;"></el-input-number> 小时
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 取消预约时间 -->
      <el-form-item label="取消预约时间">
        <el-radio-group v-model="cancelOption">
          <el-radio label="no-limit">在上课前任意时间均可取消</el-radio>
          <el-radio label="limit-hours">
            取消截止时间为上课前
            <el-input-number v-model="cancelHours" :disabled="cancelOption !== 'limit-hours'" min="1" style="margin-left: 10px; width: 100px;"></el-input-number> 小时
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item>
        <el-button type="primary" @click="saveSettings" class="save-button">保存设置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const startOption = ref('no-limit');
const startDays = ref(7);

const endOption = ref('no-limit');
const endHours = ref(1);

const cancelOption = ref('no-limit');
const cancelHours = ref(1);

const saveSettings = () => {
  ElMessage.success('设置已保存');
};
</script>


<style scoped>
.box-card {
  max-width: 650px;
  margin: 40px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.form-group {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 25px;
}

.el-input-number {
  vertical-align: middle;
  margin-left: 8px;
}

.save-button {
  width: 50%;
  height: 40px;
  font-size: 16px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

.save-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>
